<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/Contacts.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<title>党建地图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.top {
				width: 100%;
				height: 100px;
				background: #000;
				color: #fff;
				position: absolute;
				top: 0;
				-webkit-box-shadow: 0 0 0px #999;
				-moz-box-shadow: 0 0 0px #999;
				box-shadow: 0 0 0px #999;
				background-color: #eb2b01;
			}
			
			.bottom {
				width: 100%;
				height: 40px;
				background: #eee;
				color: #999;
				position: absolute;
				bottom: 0;
				/*以上设置是重点必须的*/
				text-align: center;
				line-height: 40px;
			}
			
			.mainBox {
				width: 100%;
				position: absolute;
				top: 100px;
				bottom: 40px;
				/*以上设置是重点必须的*/
			}
			
			.hgt100 {
				height: 100%
			}
			
			#container {
				height: 100%;
				width: 100%;
			}
			/*图例*/
			
			.legend-map {
				position: absolute;
				bottom: 20px;
				right: 30px;
				width: 270px;
				height: 120px;
				background-color: rgba(255, 255, 255, 0.9);
				border: 1px solid #ccc;
				border-radius: 4px;
				padding: 10px;
				padding-top: 20px;
			}
			
			.legend-map .type {
				display: block;
				width: 80px;
				height: auto;
				margin: auto;
				text-align: center;
				position: relative;
				padding-bottom: 5px;
				color: #555;
				float: left;
			}
			
			.legend-map .type .type_icon {
				display: block;
				width: 60px;
				height: 60px;
				margin: auto;
				border: 1px solid #ccc;
				border-radius: 10px;
			}
			
			.type.active .type_title {
				color: #d81e06;
			}
			
			.type.active .type_icon {
				border: 1px solid orangered;
				background-color: #FFF8F8;
			}
			
			.type .type_title {
				display: block;
				height: 40px;
				line-height: 40px;
			}
			
			a {
				text-decoration: none;
				color: #56678F;
			}
			
			a:hover {
				text-decoration: none;
				cursor: pointer;
			}
			
			a:link {
				text-decoration: none;
			}
			
			a:active: {
				text-decoration: none;
			}
			
			a:visited {
				text-decoration: none;
			}
			
			.badge-top {
				position: absolute;
				top: -10px;
				right: 0;
			}
			
			.badge-top-active {
				background-color: orangered;
			}
			.i_icon{
				display: inline-block;
				width:30px ;
				height: 30px;
				background-size: 30px 30px !important;
			}
			.type_icon_1 {
				background: url(img/mapicon_1.png) no-repeat;
				background-position: center;
			}
			
			.type_icon_2 {
				background: url(img/mapicon_3.png) no-repeat;
				background-position: center;
			}
			
			.type_icon_3 {
				background: url(img/mapicon_4.png) no-repeat;
				background-position: center;
			}
			.aContent_title{
				color: #d81e06;
			}
			.i_red{
				color: red;
			}
		</style>
	</head>

	<body>
		<div class="top"><img src="img/logopng.png" height="100%" /></div>
		<div class="mainBox">
			<div class=" hgt100">
				<div class="col-md-9 hgt100" style="position: relative; padding: 0;">
					<div id="container"></div>
					<div class="legend-map">
						<a class="type active" href="javascript:;" onclick="showAHideMarker('党支部',this)">
							<span class="type_icon type_icon_1 "></span>
							<span class="type_title">党组织分布</span>
							<span class="badge badge-top badge-top-active">0</span>
						</a>
						<a class="type active" href="javascript:;" onclick="showAHideMarker('活动',this)">
							<span class="type_icon type_icon_2"></span>
							<span class="type_title">党组织活动</span>
							<span class="badge badge-top badge-top-active">0</span>
						</a>
						<a class="type active" href="javascript:;" onclick="showAHideMarker('志愿者',this)">
							<span class="type_icon type_icon_3"></span>
							<span class="type_title">志愿者活动</span>
							<span class="badge badge-top badge-top-active">0</span>
						</a>
					</div>
				</div>
				<div class="col-md-3 hgt100">
					<br />
					<div class="panel">
					  <div class="panel-heading">最新开展活动</div>
					  <ul class="list-group">
					    <li class="list-group-item">党员教育</li>
					    <li class="list-group-item">江宁区第十三届党代会江宁高职校党代表选举大会</li>
					    <li class="list-group-item">江宁高职校“两学一做”专题教育活动辅导报告</li>
					    <li class="list-group-item">江宁区第十三届党代会江宁高职校党代表选举大会</li>
					    <li class="list-group-item">江宁高职校“两学一做”专题教育活动辅导报告</li>
					    <li class="list-group-item">党员教育</li>
					    <li class="list-group-item">江宁区第十三届党代会江宁高职校党代表选举大会</li>
					  </ul>
					</div>
					<br />
					<div class="panel">
					  <div class="panel-heading">活动开展排名TOP10</div>
					  <ul class="list-group">
					    <li class="list-group-item">党员教育</li>
					    <li class="list-group-item">江宁区第十三届党代会江宁高职校党代表选举大会</li>
					    <li class="list-group-item">江宁高职校“两学一做”专题教育活动辅导报告</li>
					    <li class="list-group-item">党员教育</li>
					    <li class="list-group-item">江宁区第十三届党代会江宁高职校党代表选举大会</li>
					    <li class="list-group-item">江宁高职校“两学一做”专题教育活动辅导报告</li>
					    <li class="list-group-item">江宁区第十三届党代会江宁高职校党代表选举大会</li>
					    <li class="list-group-item">江宁高职校“两学一做”专题教育活动辅导报告</li>
					  </ul>
					</div>
				</div>
				
			</div>
			<div class="sliderbar-container" style="background: white;">
				<div class="sliderbar-title"><i></i> 组织架构</div>
				<div class="sliderbar-body">
					<div class="Contacts">
						<li class="angular-ui-tree-node"></li>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">党建地图</div>

		<div style="display: none;">
			<div id="aContent_0">
				<h2 class="aContent_title">活动名称</h2>
				<div>
					<div style="padding-left: 30px;"><span><i class="glyphicon glyphicon-home" style="color: red;"></i> 地址: </span><span  class="deptAddress">南京市江宁区淳化街道土远路民主社区</span></div>
				</div>
				<br>
				<div class="panel panel-default">
					<div class="panel-heading">最近展开的5次活动</div>
					<table class="table"> 
					</table>
				</div>
			</div>
			<div id="aContent_1">
				<h2 class="aContent_title">活动名称</h2>
				<div>
					<div><span><i class="glyphicon glyphicon-flag i_red"></i> 组织:</span><span class="deptName"></span></div>
				</div>
				<br>
				<div class="panel panel-default">
					<div class="panel-heading">活动详情</div>
					<div class="panel-body panel-content">
					    
					 </div>
				</div>
				<div style="text-align: right;" class="detaliClick">
					
				</div>
			</div>
			<div id="aContent_2">
				<h2 class="aContent_title">志愿活动</h2>
				<div style="padding-left: 30px;">
					<div><span><i class="glyphicon glyphicon-flag i_red"></i> 组织:</span><span class="deptName"></span></div>
				</div>
				<br>
				<div class="panel panel-default">
					<div class="panel-heading">活动详情</div>
					<div class="panel-body panel-content">
					    
					 </div>
				</div>
				<div style="text-align: right;" class="detaliClick">
				</div>
			</div>
		</div>
		<!-- 活动详情 -->
		<div class="modal fade" id="activityModal" tabindex="-1" role="dialog" aria-labelledby="activityModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="activityModalLabel">活动详情</h4>
		      </div>
		      <div class="modal-body">
		      	
		      	
		      	
		      </div>
		    </div>
		  </div>
		</div>

		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/face_API/AES.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/face_API/constants.js"></script>
		<script src="js/face_API/api_config.js"></script>
		<script src="js/face_API/AES.js"></script>
		<script src="js/face_API/md5.js"></script>
		<script src="js/face_API/encrypt.js"></script>
		<script src="js/jquery.sliderBar.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F8GGZGTAevRPL7BwLtTjQvEzdAlpzqTt"></script>
		<script src="js/function.js" type="text/javascript" charset="utf-8"></script>
	</body>
	<script type="text/javascript">
		// 创建地图实例
		var map = new BMap.Map("container", {
			enableMapClick: false
		});
		var iconArr = [
			new BMap.Icon("img/mapicon_1.png", new BMap.Size(64, 64)),
			new BMap.Icon("img/mapicon_3.png", new BMap.Size(64, 64)),
			new BMap.Icon("img/mapicon_4.png", new BMap.Size(64, 64))
		];
		$(function() {
			//初始化 组织部门
			$('.sliderbar-container').sliderBar({
				open: false, // 默认是否打开，true打开，false关闭
				top: $(".top").height() + 20, // 距离顶部多高
				width: 300, // body内容宽度
				height: $("#container").height() - 40, // body内容高度
				theme: 'orange', // 主题颜色
				position: 'left' // 显示位置，有left和right两种
			});
			//查询组织架构
			queryCompanyDept()
			map.enableScrollWheelZoom();

			
		});
	</script>

</html>